<template>
  <div class="home">
    <el-card>
      <el-row>
        <el-col :span="12">
          <el-statistic
            title="今日物流总数"
            :value="statisticsInfo.totalLogisticsCount" />
        </el-col>
        <el-col :span="12">
          <el-statistic
            title="今日物流购买总吨数"
            :value="statisticsInfo.totalLogisticsBuyTon" />
        </el-col>
        <el-col :span="12">
          <el-statistic
            title="今日提货总数"
            :value="statisticsInfo.totalPickCount" />
        </el-col>
        <el-col :span="12">
          <el-statistic
            title="今日提货应付款总数"
            :value="statisticsInfo.totalPickPayPrice">
          </el-statistic>
        </el-col>
      </el-row>
    </el-card>
    <div style="height: 5px;"></div>
    <el-row>
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card_header">
              <span>提货提醒</span>
            </div>
          </template>
          <el-card
            class="table_card info-card"
            v-if="tableHomeData.length > 0"
            v-for="item in tableHomeData"
            :key="item.id"
            @click="goTakeDelivery(item)">
            <div class="info-item">
              <div class="info-title">车次号：</div>
              <div class="info-main">{{ item.trainNumber }}</div>
            </div>
            <div class="info-item">
              <div class="info-title">采购订单编号：</div>
              <div class="info-main">{{ item.purchaseOrderNumber }}</div>
            </div>
            <div class="info-item">
              <div class="info-title">采购订单名称：</div>
              <div class="info-main">{{ item.purchaseOrderName }}</div>
            </div>
            <div class="info-item">
              <div class="info-title">剩余预计提货完成天数：</div>
              <div class="info-main">{{ item.residuePredictFinishDays }}</div>
            </div>
            <div class="info-item">
              <div class="info-title">是否到货：</div>
              <div class="info-main">{{ item.isArrive ? "是" : "否" }}</div>
            </div>
            <div class="info-item">
              <div class="info-title">到货日期：</div>
              <div class="info-main">{{ formatDate(item.arriveDate) }}</div>
            </div>
          </el-card>
          <noDataPage v-else />
        </el-card>
      </el-col>
    </el-row>
  </div>
  <!-- 查看 -->
  <View
    ref="viewRef"
    :rowData="rowData" />
</template>

<script setup>
// import ApiSysInfo from "@/api/modules/sys-info"
import { ref, onMounted } from "vue";
import ApiPurchaseOrder from "@/api/modules/purchase-order"
import ApiHome from "@/api/modules/home"
import { formatDate } from "@/common/utils/date";
import { useRouter } from "vue-router"
import View from "@/views/system-information/component/View.vue"
import noDataPage from "@/components/noDataPage.vue";

/** 路由 */
const router = useRouter()
/** 查看组件实例 */
const viewRef = ref()
const rowData = ref({})
// 枚举类型列表
// const enumList = ref([])
// 采购订单分页
const tableOrderData = ref([])
const tableOrderLoading = ref(false)
const paginationOrder = ref({
  pageNum: 1,
  pageSize: 5,
  total: 0
})
// 提货分页
const tableHomeData = ref([])
const tableHomeLoading = ref(false)
const paginationHome = ref({
  pageNum: 1,
  pageSize: 5,
  total: 0
})
// 公告分页
// const tableAnnouncementData = ref([])
// const tableAnnouncementLoading = ref(false)
// const paginationAnnouncement = ref({
//   pageNum: 1,
//   pageSize: 5,
//   total: 0
// })
// 今日统计信息
const statisticsInfo = ref({})

/** 采购订单列表分页查询 */
const purchaseOrderSelectPage = async () => {
  tableOrderLoading.value = true
  const data = await ApiPurchaseOrder.selectPage({}, {
    pageNum: paginationOrder.value.pageNum,
    pageSize: paginationOrder.value.pageSize
  })
  tableOrderData.value = data.data.records
  paginationOrder.value.total = data.data.total
  tableOrderLoading.value = false
}
// const handleCurrentOrderChange = async (val) => {
//   paginationOrder.value.pageNum = val
//   await purchaseOrderSelectPage()
// }

/** 提货列表分页查询 */
const trainPickPredictEndDateRemind = async () => {
  tableHomeLoading.value = true
  const data = await ApiHome.trainPickPredictEndDateRemind({
    pageNum: paginationHome.value.pageNum,
    pageSize: paginationHome.value.pageSize
  })
  tableHomeData.value = data.data.records
  paginationHome.value.total = data.data.total
  tableHomeLoading.value = false
}
// const handleCurrentHomeChange = async (val) => {
//   paginationHome.value.pageNum = val
//   await trainPickPredictEndDateRemind()
// }

/** 公告列表分页查询 */
// const selectPage = async () => {
//   tableAnnouncementLoading.value = true
//   const data = await ApiSysInfo.selectPage({}, {
//     pageNum: paginationAnnouncement.value.pageNum,
//     pageSize: paginationAnnouncement.value.pageSize
//   })
//   tableAnnouncementData.value = data.data.records
//   paginationAnnouncement.value.total = data.data.total
//   tableAnnouncementLoading.value = false
// }
// const handleCurrentAnnouncementChange = async (val) => {
//   paginationAnnouncement.value.pageNum = val
//   await selectPage()
// }

/** 获取今日统计信息 */
const todayStatistics = async () => {
  const data = await ApiHome.todayStatistics()
  statisticsInfo.value = data.data
}

/** 获取枚举类型 */
// const getSysInfoTypeEnum = async () => {
//   const data = await ApiSysInfo.getSysInfoTypeEnum()
//   enumList.value = data.data
// };

/** 获取系统信息 */
// const getSysPerformanceEvaluation = async () => {
//   const data = await ApiSysInfo.getSysPerformanceEvaluation()
//   sysEvaluation.value = data.data
// }

/** 跳转采购订单修改页面 */
// const goEdit = (row) => {
//   router.push({
//     path: "/purchase-order-insert/index",
//     query: { purchaseOrderNumber: row.purchaseOrderNumber }
//   })
// }

/** 跳转车次列表页面 */
const goTakeDelivery = (row) => {
  router.push({
    path: "/train-inventory/index",
    query: { trainNumber: row.trainNumber }
  })
}

/** 查看通知 */
// const rowClick = (row) => {
//   viewRef.value.visibility = true
//   rowData.value = row.row
// }

onMounted(async () => {
  // await getSysInfoTypeEnum()
  await purchaseOrderSelectPage()
  await trainPickPredictEndDateRemind()
  // await selectPage()
  await todayStatistics()
})
</script>

<style lang="scss" scoped>
.home {
  height: calc(100vh - 90px);
  overflow-y: auto;

  .el-row {
    align-items: flex-start;

    .info-card {
      padding: 10px;
      margin-bottom: 3px;

      .info-item {
        display: flex;
        padding: 5px 0;
        align-items: end;

        .info-title {
          width: 120px;
          color: #999;
        }

        .info-main {
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  :deep(.el-card__header) {
    padding: 10px 20px;

    span {
      font-family: sans-serif;
      font-size: 13px;
    }
  }

  .el-pagination {
    padding: 10px;
    padding-bottom: 0;
    justify-content: end;
  }

  .diskEcharts {
    height: 280px;
  }

  .internalEcharts {
    height: 280px;
  }
}
</style>
